<template>
  <div>
    <toptitle @submit="getData"></toptitle>
    <section>
      <optionVue
        status="未完成"
        @edit="edit"
        @editShow="editShow"
        @del="del"
        :arr="arr"
      ></optionVue>
      <optionVue status="已完成" :arr="arr"></optionVue>
    </section>
    <footerVue @delAll="delAll"></footerVue>
  </div>
</template>
<script setup>
import footerVue from "./components/footer.vue";
import toptitle from "./components/toptitle.vue";
import optionVue from "./components/option.vue";
import { computed, reactive } from "vue";
let arr = reactive([]);
const getData = (val) => {
  arr.push(val);
};
const editShow = (val) => {
  arr[val.index].show = val.show;
};
const edit = (val) => {
  arr[val.index] = val.obj;
};
const del = (val) => {
  arr.splice(val, 1);
};
const delAll = () => {
  arr.splice(0);
};
</script>

<style scoped></style>
